﻿@page "/components/{name}"
@page "/components"
@page "/charts/{name}"
@page "/charts"
@page "/experimental/{name}"
@page "/experimental"

@page "/{locale}/components"
@page "/{locale}/components/{name}"
@page "/{locale}/charts/{name}"
@page "/{locale}/charts"
@page "/{locale}/experimental/{name}"
@page "/{locale}/experimental"
<section class="main-container main-container-component">
    <article>

        @if (_demoComponent != null)
        {
            var title = $"{(CurrentLanguage == "zh-CN" ? _demoComponent.SubTitle + " " : "")}{_demoComponent.Title} - Ant Design Blazor".Trim();
            <PageTitle>@title</PageTitle>
            var docDemos = _demoComponent.DemoList?.Where(x => x.Docs.HasValue && x.Docs.Value) ?? Enumerable.Empty<DemoItem>();

            if (_anchors.Any())
            {
                <div class="toc-affix">
                    <Affix OffsetTop="16">
                        <Anchor Key="@_demoComponent.Title">
                            @foreach (var demo in _anchors)
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#components-{_demoComponent.Title.ToLower()}-demo-{demo.Name.ToLower()}")" Title="@demo.Title" />
                            }
                            @if (!string.IsNullOrEmpty(_demoComponent.ApiDoc))
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#API")" Title="API" />
                            }
                            @if (!string.IsNullOrEmpty(_demoComponent.Faq))
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#Faq")" Title="@Localizer["app.footer.faq"]" />
                            }
                        </Anchor>
                    </Affix>
                </div>
            }

            <section class="markdown">
                <h1>
                    @_demoComponent.Title
                    @if (CurrentLanguage == "zh-CN")
                    {
                        <span class="subtitle">@_demoComponent.SubTitle</span>
                    }
                    <span class="widget"></span>
                    <Tooltip Title="@Localizer["app.content.edit-demo"]">
                        <Unbound>
                            <a @ref="context.Current" href="@EditUrl" class="edit-button" rel="noopener noreferrer" target="_blank">
                                <Icon Type="@IconType.Outline.Edit" />
                            </a>
                        </Unbound>
                    </Tooltip>
                    <div style="float:right;">
                        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CW7I6K7I&placement=antblazorcom&format=cover" id="_carbonads_js"></script>
                    </div>
                </h1>
                <section class="markdown">
                    @((MarkupString)_demoComponent.Desc)
                </section>

                @foreach (var docDemo in docDemos)
                {
                    <DocDemoView Demo="@docDemo" @key="@($"{_demoComponent.Title}-{docDemo.Type}")" />
                }

                @if (_demos.Any())
                {
                    <h2 data-scrollama-index="1">
                        @Localizer["app.component.examples"]
                        <span class="all-code-box-controls">
                            @if (_demoComponent.Cols != 1)
                            {
                                @if (_expanded)
                                {
                                    <Icon Type="@IconType.Outline.Compress" Class="code-box-expand-trigger" OnClick="() => _expanded = false " />
                                }
                                else
                                {
                                    <Icon Type="@IconType.Outline.Expand" Class="code-box-expand-trigger" OnClick="() => _expanded = true " />
                                }
                            }
                            <Icon Type="@IconType.Outline.Code" Theme="@(_expandAllCode ? IconThemeType.Fill : IconThemeType.Outline)" Class="code-box-expand-trigger" OnClick="()=>_expandAllCode=!_expandAllCode" />
                            @*<Icon Type="@IconType.Outline.Bug" Class="code-box-expand-trigger" />*@
                        </span>
                    </h2>
                }
            </section>

            @if (_demos.Any())
            {
                <Row Style="margin-left: -8px; margin-right: -8px;">
                    @if (_demoComponent.Cols == 1 || _expanded)
                    {
                        foreach (var demo in _demos)
                        {
                            <AntDesign.Col Span="24" Class="code-boxes-col-1-1" Style="padding-left: 8px; padding-right: 8px;">
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="demo.Type" ComponentName="@_demoComponent.Title"></CodeBox>
                            </AntDesign.Col>
                        }
                    }
                    else
                    {
                        var leftList = _demos.Where((_, i) => i % 2 == 0);
                        var rightList = _demos.Where((_, i) => i % 2 != 0);

                        <AntDesign.Col Md="12" Sm="24" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in leftList)
                            {
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="demo.Type" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                        <AntDesign.Col Md="12" Sm="24" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in rightList)
                            {
                                <CodeBox CodeExpand="_expandAllCode" Demo="demo" @key="demo.Type" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                    }
                </Row>
            }
           
            <section class="markdown api-container">
                @((MarkupString)_demoComponent.ApiDoc)
            </section>

            <section class="markdown api-container">
                @((MarkupString)_demoComponent.Faq)
            </section>
        }
        else
        {
            <Skeleton ParagraphRows="3" Active></Skeleton>
        }
    </article>
    <ContributorsList FilePaths="_filePaths" />
</section>

<style>
    html {
        scroll-behavior: smooth;
    }
</style>